<template>
  <div class="IPhoneNumber">
    <p>手机号</p>
    <!-- 手机号输入框 -->
    <div class="IphoneLogin-iphoneBox">
      <van-field
        readonly
        clickable
        name="picker"
        :value="'+' + IphoneCtiy"
        placeholder=""
        @click="showPicker = true"
      />
      <van-popup
        v-model="showPicker"
        position="bottom"
        closeable
        close-icon-position="top-left"
        :style="{ height: '70%', width: '100%' }"
      >
        <h3>请选择国家/地区</h3>
        <div
          class="IphoneLogin-iphoneBox-Area"
          v-for="(item, index) in columns"
          :key="index"
          @click="GetSelect(item.area_code)"
        >
          <p>{{ item.area_name }}</p>
          <span>{{ "+" + item.area_code }}</span>
        </div>
      </van-popup>
      <!-- 输入框 -->
      <van-cell-group>
        <van-field v-model="IphoneValue" placeholder="请输入手机号" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { IphoneArea } from "@/api/request";

export default {
  name: "IPhoneNumber",
  data() {
    return {
      // 手机号输入框
      IphoneValue: "",
      // 选择手机号地区
      IphoneCtiy: "86",
      // 手机号地区数据
      columns: [],
      showPicker: false,
    };
  },
  mounted() {
    IphoneArea().then(({ data }) => {
      this.columns = data.data;
      //   console.log(data.data);
    });
  },
  methods: {
    GetSelect(code) {
      this.IphoneCtiy = code;
      this.showPicker = false;
    },
  },
  watch: {
    // 发送验证码按钮判断
    IphoneValue(newVal) {
      if (newVal) {
        // console.log(newVal);
        this.sendButtonColor = "#2e4e6f";
      } else {
        this.sendButtonColor = "#dee2e6";
      }
      this.$emit("SentButtonColor", {
        ButtonColor: this.sendButtonColor,
        IphoneValue: this.IphoneValue,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.IPhoneNumber {
  > p {
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
  }
  // 手机验证部分
  .IphoneLogin-iphoneBox {
    display: flex;
    justify-content: center;
    box-shadow: var(--boxsizi);
    // 左边选择号码地区盒子
    .van-field {
      width: 20%;
      background-color: transparent;
    }
    // 右边输入框盒子
    .van-cell-group {
      width: 90%;
      .van-field {
        width: 100%;
      }
    }
    // 手机号地区选择 遮罩层
    .van-popup {
      h3 {
        font-size: 1.125rem;
        padding: 0.625rem;
        margin-top: 3.125rem;
      }
      .IphoneLogin-iphoneBox-Area {
        padding: 0.625rem 0.875rem;
        display: flex;
        justify-content: space-between;
        p {
          font-size: 0.875rem;
        }
        span {
          color: #ccc;
        }
        &:hover {
          background-color: #ccc;
        }
      }
    }
  }
}
</style>